<template>
  <div ref="cateroryEChartRef" :class="className" :style="{ height: height, width: width }" />
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
  xDataArray: {
    type: Array,
    default: () => [],
  },
  allDataArray: {
    type: Array,
    default: () => [],
  },
  className: {
    type: String,
    default: "cateroryChart",
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "300px",
  },
  autoResize: {
    type: Boolean,
    default: true,
  }
})

const className = props.className;
const width = props.width;
const height = props.height;

const cateroryEChartRef = ref(null);
let myChart = null;

onMounted(() => {
  initChart(props.allDataArray);
});

watch(
  () => props.allDataArray,
  (newValue) => {
    initChart(newValue);
  },
);

// 组件卸载前销毁图表，避免内存泄露
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
  }
});

function initChart(dataArr) {
  myChart = echarts.init(cateroryEChartRef.value, "macarons");
  myChart.setOption({
    color: ["#57aeff", "#ffe374"],
    backgroundColor:"transparent",
    xAxis: {
        data: props.xDataArray,
        axisTick: {
          alignWithLabel:true
        },
        axisLabel:{
          color:'#666666'
        },
        axisLine:{
          show:true,
          lineStyle:{
            color:'#999999'
          }
        }
    },
    grid: {
        left: 20,
        bottom: 0,
        right:0,
        containLabel: true,
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor:'rgba(255,255,255,0.8)',
        textStyle:{
          color:'#666666'
        },
        padding: [10, 10],
    },
    yAxis: {
        minInterval: 1,
        axisTick: {
          show: false,
        },
        axisLabel:{
          color:'#666666'
        },
        splitLine:{
          lineStyle:{
            type:'dashed'
          }
        },
        splitArea:{
          show: false
        }
    },
    legend: {
        icon: "circle",
        itemWidth: 8,
        itemHeight: 8,
        data: ["线下会议", "直播会议"],
        textStyle: {
          color: "#999999",
        },
    },
    series: dataArr
  });
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
</script>
